<template>
  <div class="hot-sider">
    <div class="title">
      <h1 class="title-text">搜索</h1>
    </div>
    <div class="link-list">
      <div class="button-group">
        <a-button
          type="text"
          size="large"
          class="button-with-icon"
          :class="{ active: activeTab === 'blog' }"
          @click="navigateTo('blog')"
          ><template #icon><IdcardOutlined /></template>博客</a-button
        >
        <a-button
          type="text"
          size="large"
          class="button-with-icon"
          :class="{ active: activeTab === 'user' }"
          @click="navigateTo('user')"
          ><template #icon><FileProtectOutlined /></template>用户</a-button
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { IdcardOutlined, FileProtectOutlined } from "@ant-design/icons-vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();

watch(
  () => route.path,
  (newPath) => {
    if (newPath.includes("blog")) {
      activeTab.value = "blog";
    } else if (newPath.includes("user")) {
      activeTab.value = "user";
    }
  }
);

const activeTab = ref<"blog" | "user">(
  route.path.includes("blog") ? "blog" : "user"
);

const navigateTo = (tab: "blog" | "user") => {
  activeTab.value = tab;
  const currentQuery = route.query.q as string | undefined;
  if (!currentQuery) {
    return;
  }
  router.push({
    path: `/search/${tab}`,
    query: { q: currentQuery },
  });
};
</script>

<style scoped>
.title-text {
  font-size: 20px;
  font-weight: 550;
}

.button-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

:deep(.button-with-icon .ant-btn-icon) {
  margin-right: 8px; /* 图标和文字之间留点空隙 */
}

:deep(.button-with-icon) {
  font-size: 16px !important;
  color: #333 !important;
  justify-content: flex-start; /* 内容左对齐 */
  text-align: left; /* 确保文字左对齐 */
  padding-left: 0; /* 去掉默认内边距影响对齐 */
}

:deep(.button-with-icon.active) {
  color: #398bfb !important;
}
</style>
